<template>
  <HeadContainer class="mine-purchases bg-background" title="用户组与收益介绍" @back="back">
    <div>
      <div class="lv-wrap">
        <div class="title">目前等级 - Tier{{ userData.tier }}</div>
        <div class="box">
          <img :src="getAssetsImage('l' + userData.tier)" alt="" />
          <p>视频每次播放完可获取</p>
          <div class="d1">$ <span>0.3</span> USD</div>
          <div class="d2">每日收益上线：${{ userData.tier === 4 ? 100 : 50 }}USD</div>
        </div>
      </div>
      <div v-if="userData.tier !== 4" class="lv-wrap mt-6">
        <div class="title">下一个等级 - Tier{{ userData.tier + 1 }}</div>
        <div class="box">
          <img :src="getAssetsImage('l' + (userData.tier + 1))" alt="" />
          <div class="d2">每日收益上线：${{ userData.tier === 4 ? 100 : 50 }}USD</div>
        </div>
      </div>
      <div v-else class="lv-wrap mt-6 mb-4">
        <div class="title">下一个等级 - <span style="color: #f42c52">您已最高等级</span></div>
      </div>
      <!--升级方式-->
      <div v-if="userData.tier !== 4" class="upgradeMode-wrap">
        <div class="title">升级方式</div>
        <div>
          申請 <span>KYC認證</span> 快速升到 <span>Tier{{ userData.tier + 1 }}</span> 並且獲取<span>徽章</span>
        </div>
        <div>
          或 <span>每周累计 {{ userData.tier === 3 ? '1,000,000' : '100,000' }} 次有效观看</span>
        </div>
      </div>
      <!--其他说明-->
      <div class="order-desc">
        <div class="title">其他说明</div>
        <div class="item">
          <div>1.</div>
          <div class="title">用户可以通过上传视频至免费区域来赚取视频播放收益</div>
        </div>
        <div class="item">
          <div>2.</div>
          <div class="title">每日收益金額上限將以用戶等級不同而有升級調整</div>
        </div>
        <div class="item">
          <div>3.</div>
          <div class="title">
            收益公式：
            <div class="inner">
              <div class="item">
                <div>a.</div>
                <div>视频时长 ≥180秒：每次完整播放可赚 $0.30</div>
              </div>
              <div class="item">
                <div>b.</div>
                <div>视频时长 ＜180秒：每次完整播放可赚 (视频时长 ÷ 180秒) × $0.30</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div>4.</div>
          <div class="title">期間所有收益金額可於 [ 我的 > 收益 ] 當中查看</div>
        </div>
        <div class="item">
          <div>5.</div>
          <div class="title">
            假設用戶等級為 Tier2 會員, 其中上傳的有 10 部視頻 ,每部一天完整播放 15 次, 每月收益將為
            <div class="inner">
              <div class="item">
                <div class="circle">·</div>
                <div>创作者A（1,500次完整观看，45秒视频）：$112.5（$0.30 × 45/180 × 1,500）</div>
              </div>
              <div class="item">
                <div class="circle">·</div>
                <div>创作者B（1,500次完整观看，2分钟视频）：$300（$0.30 × 120/180 × 1,500）</div>
              </div>
              <div class="item">
                <div class="circle">·</div>
                <div>创作者C（1,500次完整观看，4分钟视频）：$450（但每日最高可领取 $50）</div>
              </div>
              <div class="item">
                <div class="circle">·</div>
                <div>每日最高收益 $50，超出部分不累计</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div>6.</div>
          <div class="title">視頻上傳內容得符合平台規章, 若上傳不合規定視頻被屏蔽之用戶, 所以收益將無法提領</div>
        </div>
        <div class="item">
          <div>7.</div>
          <div class="title">播放計算說明：24H內非重複用戶完整播放計 1 次</div>
        </div>
      </div>
    </div>
  </HeadContainer>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { $t } from '@/i18n/index.js'
import HeadContainer from '@comp/layout/HeadContainer.vue'
import MediaTabs from '@comp/tabs/MediaTabs.vue'
import { toCapitalize } from '@/utils/string-helper.js'

const { userData } = storeToRefs(useAccountStore())
// userData.value.tier = 4
const emits = defineEmits(['toPage', 'back'])
const router = useRouter()

function back() {
  emits('back')
  router.replace({ name: 'mine' })
}

const getAssetsImage = (url) => {
  console.log('url -->', url)
  return new URL(`./images/${url}.png`, import.meta.url).href
}
</script>

<style scoped lang="scss">
.lv-wrap {
  .title {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 16px;
  }

  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      margin-top: 15px;
      margin-bottom: 16px;
    }

    p {
      margin-bottom: 8px;
      font-weight: 600;
      font-size: 14px;
      line-height: 19.6px;
    }

    .d1 {
      margin-bottom: 8px;
      font-size: 16px;

      span {
        background: linear-gradient(180deg, #f95e0e, #e717b3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 32px;
      }
    }

    .d2 {
      font-weight: 600;
      font-size: 14px;
      line-height: 19.6px;
    }
  }
}

.upgradeMode-wrap {
  margin-top: 16px;

  .title {
    font-weight: 600;
    font-size: 16px;
  }

  & > div {
    margin: 8px 0;
  }

  & > div:not(.title) {
    font-size: 14px;

    span {
      color: #f42c52;
    }
  }
}

.order-desc {
  & > .title {
    font-weight: 600;
    font-size: 16px;
    line-height: 22.4px;
  }

  .item {
    display: flex;
    margin: 8px 0;
    gap: 3px;

    & > div {
      font-weight: 500;
      font-size: 14px;
      line-height: 19.6px;
    }

    .inner {
      border-radius: 10px;
      padding: 8px;
      background: #333546;
      margin-top: 8px;

      div {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        line-height: 19.6px;
        color: #f42c52;
      }

      .circle {
        font-size: 40px;
        margin: 0 2px;
      }
    }
  }
}
</style>
